<style module>
.me {
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
}
</style>
<template>
  <div ref="myChart" :class="$style.me" :style="chartStyle"></div>
</template>

<script>
import { responsiveSize } from "public/tools/common.js";
export default {
  name: "lineChart",
  data() {
    return {
      myChart: {},
      series: [],
    };
  },
  props: {
    data: {
      default: () => {
        return {
          categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          values: {
            Email: [120, 132, 101, 134, 90, 230, 210],
            "Union Ads": [220, 182, 191, 234, 290, 330, 310],
            "Video Ads": [150, 232, 201, 154, 190, 330, 410],
            Direct: [320, 332, 301, 334, 390, 330, 320],
          },
        };
      },
    },
    chartStyle: {
      default: () => {},
    },
    config: {
      default: () => {
        return {
          type: "line",
          toolbox: true,
          xAxisNameLocation: "",
          boundaryGap: false,
          yAxisMin: 0,
          yAxisMax: 3000,
          yAxisNameLocation: "end",
          legend: true,
          smooth: true,
          stack: "",
          color: [
            "#5470c6",
            "#91cc75",
            "#fac858",
            "#ee6666",
            "#73c0de",
            "#3ba272",
            "#fc8452",
            "#9a60b4",
            "#ea7ccc",
          ],
          //bar
          showBackground: true,
        };
      },
    },
    //国际化
    language: {
      default: () => {
        return {
          "en-US": {
            title: "title",
            xAxisTitle: "xAxisTitle",
            yAxisTitle: "yAxisTitle",
          },
          "zh-CN": {
            title: "标题",
            xAxisTitle: "x轴标题",
            yAxisTitle: "y轴标题",
          },
        };
      },
    },
  },
  computed: {
    option() {
      return {
        legend: {
          show: this.config.legend || true,
          top: 2,
          textStyle: {
            color: "#fff",
            fontSize: responsiveSize(14),
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          top: "4%",
          bottom: "8%",
          containLabel: true,
        },
        title: {
          text: this.language[this.G_Locale].title,
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            color: "#fff",
            fontSize: responsiveSize(12),
          },
        },
        color: this.config.color,
        xAxis: {
          type: this.config.xAxisType || "category",
          name: this.language[this.G_Locale].xAxisTitle,
          nameLocation: this.config.xAxisNameLocation,
          boundaryGap: this.config.boundaryGap,
          data: this.data.categories || [],
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
          axisLabel: {
            fontSize: responsiveSize(14),
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: this.config.yAxisType || "value",
          name: this.language[this.G_Locale].yAxisTitle,
          nameLocation: this.config.yAxisNameLocation,
          data: this.config.yAxisType === 'category' ? this.data.categories : [],
          nameTextStyle: {
            color: "#ccc",
            fontSize: responsiveSize(15),
            align: "right",
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
          axisLabel: {
            fontSize: responsiveSize(14),
          },
        },
      };
    },
  },
  watch: {
    data: {
      handler(data) {
        if (!data.values) {
          return;
        }
        this.series = this.getSeries();
        this.initChartOption();
      },
      deep: true,
    },
  },
  mounted() {
    this.handleSetChart();
    window.onresize = () => {
      this.handleResize();
    };
  },
  methods: {
    handleSetChart() {
      this.myChart = this.echarts.init(this.$el, this.config.theme);
      this.initChartOption();
    },
    initChartOption() {
      let option = {
        ...this.option,
        series: this.series.length === 0 ? this.getSeries() : this.series,
      };
      this.myChart.setOption(option);
    },
    handleResize() {
      this.myChart.resize();
    },
    getSeries() {
      let dataMap = this.data.values || [];
      let series = [];
      if (this.config.type === "line") {
        series = dataMap.map((k) => {
          k.type = "line";
          k.smooth = true;
          return k;
        });
      } else if (this.config.type === "bar") {
        series = dataMap.map((k) => {
          k.type = "bar";
          k.showBackground = this.config.showBackground;
          return k;
        });
      }
      return series;
    },
  },
};
</script>

<style scoped></style>
